<template>
<slot :controller="controller" :store="store" :model="model" :isShow="isShow">
    <AppForm v-bind="$attrs" ref="searchForm" :name="model.codeName" :class="classNames" :data="store.data" style="" v-if="isShow">
        <div class="control-content app-control-searchform__content">
            <a-row class="app-control-searchform__left">
            <slot name="SearchFormLeft" :controller="controller" :store="store" :model="model">
            <AppCol
                noRoot
                :visible="store.detailModel.n_ibizordername_like.visible"
                :layoutOpts="{parentLayout: 'TABLE_24COL',colLG: 8,colMD: 8,colSM: 8,colXS: 8,}">
                <template v-slot:default="{ slotStyle, slotClass }">
                    <slot name="n_ibizordername_like"  :controller="controller" :store="store" :model="model" :slotClass="slotClass" :slotStyle="slotStyle" :actions="{ handleComponentAction }">
                        <AppFormItem 
                            name="n_ibizordername_like"
                            :slotStyle="slotStyle"
                            :slotClass="slotClass" 
                            :label="$t('CONTROL.DEFORM.IBIZORDER.UIPART_0013.FORMITEM.N_IBIZORDERNAME_LIKE', '订单名称')"
                            labelPos="LEFT" 
                            :labelWidth="130" 
                            :showLabel="true"
                            :enableAnchor="false" 
                            :rules="store.detailModel.n_ibizordername_like.valueRule"
                            :emptyCaption="false">
                            <div class="form-editor-container">
                                <slot name="n_ibizordername_likeEditor"  :controller="controller" :store="store" :model="model" :actions="{ handleComponentAction }">
                                    <AppInput
                                        v-bind="{ editorType: 'TEXTBOX', }"
                                        type="text"
                                        style="width: 100px;"
                                        name="n_ibizordername_like"
                                        :isDebounce="false"
                                        :disabled="store.detailModel.n_ibizordername_like.disabled"
                                        :value="store.data.n_ibizordername_like"
                                        @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
                                    />
                                </slot>
                            </div>
                        </AppFormItem>
                    </slot>
                </template>
            </AppCol>
            <AppCol
                noRoot
                :visible="store.detailModel.n_orderstate_eq.visible"
                :layoutOpts="{parentLayout: 'TABLE_24COL',colLG: 8,colMD: 8,colSM: 8,colXS: 8,}">
                <template v-slot:default="{ slotStyle, slotClass }">
                    <slot name="n_orderstate_eq"  :controller="controller" :store="store" :model="model" :slotClass="slotClass" :slotStyle="slotStyle" :actions="{ handleComponentAction }">
                        <AppFormItem 
                            name="n_orderstate_eq"
                            :slotStyle="slotStyle"
                            :slotClass="slotClass" 
                            :label="$t('CONTROL.DEFORM.IBIZORDER.UIPART_0013.FORMITEM.N_ORDERSTATE_EQ', '订单状态')"
                            labelPos="LEFT" 
                            :labelWidth="130" 
                            :showLabel="true"
                            :enableAnchor="false" 
                            :rules="store.detailModel.n_orderstate_eq.valueRule"
                            :emptyCaption="false">
                            <div class="form-editor-container">
                                <slot name="n_orderstate_eqEditor"  :controller="controller" :store="store" :model="model" :actions="{ handleComponentAction }">
                                    <AppDropdownList
                                        codeListTag="common__ORDERSTATE"
                                        codeListType="STATIC"
                                        v-bind="{ editorType: 'DROPDOWNLIST', }"
                                        :multiple="false"
                                        :context="store.context"
                                        :viewParams="store.viewParams"
                                        style="width:100px;"
                                        name="n_orderstate_eq"
                                        :disabled="store.detailModel.n_orderstate_eq.disabled"
                                        :value="store.data.n_orderstate_eq"
                                        :data="store.data"
                                        @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
                                    /> 
                                </slot>
                            </div>
                        </AppFormItem>
                    </slot>
                </template>
            </AppCol>
            <AppCol
                noRoot
                :visible="store.detailModel.n_ordertime_gt.visible"
                :layoutOpts="{parentLayout: 'TABLE_24COL',colLG: 4,colMD: 4,colSM: 4,colXS: 4,}">
                <template v-slot:default="{ slotStyle, slotClass }">
                    <slot name="n_ordertime_gt"  :controller="controller" :store="store" :model="model" :slotClass="slotClass" :slotStyle="slotStyle" :actions="{ handleComponentAction }">
                        <AppFormItem 
                            name="n_ordertime_gt"
                            :slotStyle="slotStyle"
                            :slotClass="slotClass" 
                            :label="$t('CONTROL.DEFORM.IBIZORDER.UIPART_0013.FORMITEM.N_ORDERTIME_GT', '订单时间从')"
                            labelPos="LEFT" 
                            :labelWidth="130" 
                            :showLabel="true"
                            :enableAnchor="false" 
                            :rules="store.detailModel.n_ordertime_gt.valueRule"
                            :emptyCaption="false">
                            <div class="form-editor-container">
                                <slot name="n_ordertime_gtEditor"  :controller="controller" :store="store" :model="model" :actions="{ handleComponentAction }">
                                    <AppDatePicker
                                        v-bind="{ editorType: 'DATEPICKEREX_NOTIME', TIMEFMT: 'YYYY-MM-DD' }"
                                        format="YYYY-MM-DD"
                                        dateType="date"
                                        name="n_ordertime_gt"
                                        :disabled="store.detailModel.n_ordertime_gt.disabled"
                                        :value="store.data.n_ordertime_gt"
                                        @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
                                    />
                                </slot>
                            </div>
                        </AppFormItem>
                    </slot>
                </template>
            </AppCol>
            <AppCol
                noRoot
                :visible="store.detailModel.n_ordertime_lt.visible"
                :layoutOpts="{parentLayout: 'TABLE_24COL',colLG: 4,colMD: 4,colSM: 4,colXS: 4,}">
                <template v-slot:default="{ slotStyle, slotClass }">
                    <slot name="n_ordertime_lt"  :controller="controller" :store="store" :model="model" :slotClass="slotClass" :slotStyle="slotStyle" :actions="{ handleComponentAction }">
                        <AppFormItem 
                            name="n_ordertime_lt"
                            :slotStyle="slotStyle"
                            :slotClass="slotClass" 
                            :label="$t('CONTROL.DEFORM.IBIZORDER.UIPART_0013.FORMITEM.N_ORDERTIME_LT', '到')"
                            labelPos="LEFT" 
                            :labelWidth="24" 
                            :showLabel="true"
                            :enableAnchor="false" 
                            :rules="store.detailModel.n_ordertime_lt.valueRule"
                            :emptyCaption="false">
                            <div class="form-editor-container">
                                <slot name="n_ordertime_ltEditor"  :controller="controller" :store="store" :model="model" :actions="{ handleComponentAction }">
                                    <AppDatePicker
                                        v-bind="{ editorType: 'DATEPICKEREX_NOTIME', TIMEFMT: 'YYYY-MM-DD' }"
                                        format="YYYY-MM-DD"
                                        dateType="date"
                                        name="n_ordertime_lt"
                                        :disabled="store.detailModel.n_ordertime_lt.disabled"
                                        :value="store.data.n_ordertime_lt"
                                        @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
                                    />
                                </slot>
                            </div>
                        </AppFormItem>
                    </slot>
                </template>
            </AppCol>
            </slot>
            </a-row>
            <div class="app-control-searchform__right">
            <slot name="SearchFormRight" :controller="controller" :store="store" :model="model" :actions="{ handleSearch, handleAdvSearch, handleShrinkButtonClick }">
                <a-dropdown-button
                    :transfer="true"
                    :trigger="['click']"
                    placement="bottomRight"
                    type="primary"
                    @click="handleSearch"
                >
                    <span>{{$t('common.searchform.search')}}</span>
                    <template #icon>
                        <down-outlined />
                    </template>
                    <template #overlay>
                        <a-menu @click="handleAdvSearch">
                            <a-menu-item key="reset">
                                <div class="app-control-searchform__dropdown__item">{{$t('common.searchform.reset')}}</div>
                            </a-menu-item>
                            <a-menu-item key="save">
                            </a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown-button>
                <a-button
					class="app-control-searchform_shrink"
					v-if="store.hasShrinkButton"
					@click="handleShrinkButtonClick"
					>{{ store.shrinkButtonStatus ? $t('common.searchform.shrink') : $t('common.searchform.more') }}
				</a-button>
            </slot>
            </div>
        </div>
    </AppForm>
</slot>
</template>
<script setup lang="ts">
// 基于template/src/widgets/{{appEntities}}/{{ctrls@SEARCHFORM}}-searchform/{{spinalCase ctrl.codeName}}-searchform-base.vue.hbs生成
import { AppCol } from '@/components/common/col';
import { AppRow } from '@/components/common/row';
import { DownOutlined } from '@ant-design/icons-vue';
import { AppForm, AppFormPage, AppFormGroup, AppFormTabPage, AppFormItem, AppFormButton, AppFormDruipart, AppFormIframe, AppFormRaw } from '@components/widgets/form';
import { IEvent, IParam, ISearchFormAbility, ISearchFormStore, SearchFormActionType } from '@/core';
import { useProps, useBasic, useAction, useController } from './uipart-0013-searchform-hook';

let searchForm = ref<any>(null);

// 输入参数
const props = defineProps(useProps());

// 基础数据
const { controlID, getClassNames, model ,useNavParamsBind, useEventBind, handleActionClick, handleComponentAction, useShow } = useBasic(props);

const emit = defineEmits<{
    (event: 'ctrl-action', name: string, action: SearchFormActionType, data: IParam[]): void;
    (event: 'ctrl-init', name: string, data: ISearchFormAbility): void;
    (event: 'ctrl-destroy', name: string, data: IParam): void;
}>();

const evt = useEventBind(emit);
//  搜索表单控制器
const controller = useController(props, evt, { controlID, searchForm });

useNavParamsBind(controller, props);

const store: ISearchFormStore = controller.getStore();

//  部件样式名
const classNames = computed(() => {
    const shrinkClass = {
        'app-control-searchform--shrink':!store.shrinkButtonStatus,
    }
    const defaultClass = getClassNames(props);
    return Object.assign(defaultClass, shrinkClass);
});

const isShow = computed(() =>{
    return useShow();
})

const { handleSearch, handleAdvSearch, handleShrinkButtonClick } = useAction(controller);

const ctrlService = controller.getCtrlService();

onMounted(() => {
    controller.ctrlMounted();
});
onUnmounted(() => {
    controller.ctrlDestroy();
})
</script>